<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('课程列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <div class="card card-primary card-outline card-outline-tabs mb-0">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs">
                <li class="nav-item" th:each="channel : ${channelList}">
                    <a class="nav-link" th:classappend="${channelId == channel.channelId?'active':''}" th:text="${channel.channelName}" th:href="'/course/list.html?channelId='+${channel.channelId}"></a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <form id="formId" class="form-inline">
                <input class="form-control mr-1" placeholder="请输入标题或课程id" type="text" name="search"/>
                <select class="form-control mr-1" name="isAvailable" th:with="type=${@dict.getType('qdx_course_state')}">
                    <option value="0">状态</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
                <input type="hidden" name="channelId" th:value="${channelId}"/>
                <a class="btn btn-primary btn-rounded mr-1" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </form>
        </div>
    </div>
    <div class="btn-group" id="toolbar" role="group">
        <a class="btn btn-success" id="btn-course-add">
            <i class="fa fa-plus"></i> 添加
        </a>
    </div>
    <div class="select-table table-striped">
        <table id="bootstrap-table" class="table-striped"></table>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('course:edit')}]];
    var removeFlag = [[${@permission.hasPermi('course:remove')}]];
    var isAvailableDatas = [[${@dict.getType('qdx_course_state')}]];
    var sellTypeDatas = [[${@dict.getType('qdx_course_type')}]];
    var prefix = "/course";
    var channelId = [[${channelId}]];

    $(function() {
        var options = {
            url: prefix + "/list.json",
            createUrl: prefix + "/add.html",
            updateUrl: prefix + "/edit.html?id={id}",
            /* removeUrl: prefix + "/remove.json",*/
            modalName: "课程",
            columns: [
                {
                    field: 'courseId',
                    title: 'id',
                    width: 80
                },
                {
                    field: 'cover',
                    title: '封面',
                    align: 'center',
                    width: 80,
                    formatter: function(value, row, index) {
                        if (value === "" || value == null) {
                            return "<img class='img-circle img-xs' data-height='50' data-width='50' data-target='self' src='/static/logo-big.png'/>"
                        } else {
                            return $.common.sprintf("<img class='img-circle img-xs' height='50' width='50' data-target='self' src='%s'/>",  value);
                        }
                    }
                },

                {
                    field: 'courseName',
                    title: '名称'
                },
                {
                    field: 'sellType',
                    title: '类型',
                    formatter: function (value, row, index) {
                        if (value === "COURSE") {
                            return $.table.selectDictLabel(sellTypeDatas, value);
                        } else if (value === "LIVE") {
                            return '<span style="color: #2798C8">' + $.table.selectDictLabel(sellTypeDatas, value) + '</span>'
                        } else if (value === "PACKAGE") {
                            return '<span style="color:red;">' + $.table.selectDictLabel(sellTypeDatas, value) + '</span>'
                        }

                    }
                },
                {
                    field: 'categoryName',
                    title: '分类',
                    width: 120
                },
                {
                    field: 'price',
                    align: 'right',
                    title: '现价',
                    width: 80,
                    formatter: function (value, row, index) {
                        return value / 100;
                    }
                },
                {
                    field: 'buyCount',
                    align: 'center',
                    title: '销量',
                    width: 80
                },
                {
                    field: 'viewCount',
                    align: 'center',
                    title: '浏览量',
                    width: 80
                },
                {
                    field: 'updateTime',
                    title: '更新时间',
                    width: '180px'
                },
                {
                    field: 'isAvailable',
                    align: 'center',
                    title: '上架',
                    width: 60,
                    formatter: function (value, row, index) {
                        return isAvailableTools(row);
                    }
                },
                {
                    title: '操作',
                    align: 'left',
                    width: '180px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="courseInfo(\'' + row.courseId + '\')"><i class="fa fa-search"></i>详情</a> ');
                        if (row.sellType === "PACKAGE") {
                            actions.push('<a class="btn btn-warning  btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="openCourse(\'' + row.courseId + '\')"><i class="fa fa-tasks"></i>课程</a> ');
                        } else {
                            actions.push('<a class="btn btn-warning  btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="openNode(' + row.courseId + "," + "'" + row.sellType + "'" + ')"><i class="fa fa-map-o"></i>章节</a> ');
                        }
                        actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="openDetail(\'' + row.courseId + '\')"><i class="fa fa-search"></i>销量</a> ');
                        actions.push('<br>');
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="openCourseUser(\'' + row.courseId + '\')"><i class="fa fa-user"></i>学员</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.courseId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="getComment(' + row.courseId + "," + 2 + ')"><i class="fa fa-thumbs-up"></i>评论</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        //添加课程
        $('#btn-course-add').click(function (){
            $.modal.openTab("新增课程", prefix + "/add.html?channelId=" + channelId);
        })
    });

    /* 状态显示 */
    function isAvailableTools(row) {
        if (row.isAvailable === 2) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="updateIsAvailable(\'' + row.courseId + '\',\'' + 1 + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="updateIsAvailable(\'' + row.courseId + '\',\'' + 2 + '\')"></i> ';
        }
    }

    //上架与下架
    function updateIsAvailable(id, status) {
        table.set();
        var str = "";
        if (status === 1) {
            str = "请确定执行上架操作"
        } else {
            str = "请确定执行下架操作"
        }
        $.modal.confirm(str, function () {
            var data = {"id": id, "isAvailable": status};
            $.operate.submit(prefix + "/update/available.json", "post", "json", data);
        });
    }

    //课程详情
    function courseInfo(id) {
        var index = layer.open({
            title: '课程详情',
            content:'/course/view.html?id='+id,
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['70%', '95%']
        });
    }


    //打开章节窗口
    function openNode(courseId,sellType) {
        $.modal.openTab("课程章节", "/course/node/list.html?courseId=" + courseId + "&sellType=" + sellType);
    }

    //打开套餐课程窗口
    function openCourse(courseId) {
        $.modal.openTab("套餐课程列表", "/course/package/list.html?courseId=" + courseId);
    }

    //打开评论窗口
    function getComment(id,typeId) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "评论列表",
            content: "/comment/info/list.html?otherId=" + id + "&typeId=" + typeId
        });
    }

    //销售明细
    function openDetail(id) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "销售明细",
            content: "/course/order/list.html?infoId=" + id
        });
    }

    //课程学员
    function openCourseUser(id) {
        layer.open({
            type: 2,
            area: ['90%', '95%'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: "课程学员",
            content: "/course/user/list.html?courseId=" + id
        });
    }
</script>
</body>
</html>